<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>图片上传</title>
  <script type="text/javascript" src="jquery-3.3.2.min.js"></script>
  <link rel="stylesheet" href="./webuploader.css">
  <script src="./webuploader.js"></script>
  <script>

  </script>
</head>

<body>
  <div id="uploader" class="form-group col-md-4">
    <div class="row">

        <div class="col-md-6">
            <label for="DepartmentLogo">机构LOGO</label>
            <!-- 给定默认logo -->
            <input id="logoURL" type="text" name="logoURL" value="" class="hidden">
            <!-- 展示图片上传状态 -->
            <div id="info" class="uploader-list"></div>
</div>
        <div id="picker" class="col-md-6 " id="logolist" title="点击上传logo" height="100" width="100">
            <div id="">
                <img id="logoImg" title="点击上传logo" height="100" width="100" src="">
            </div>
        </div>

    </div>
</div>
</body>

</html>
<script>
  $(function () {
  /*init webuploader*/
         var $info = $('#info');
        var uploader = WebUploader.create({
            //是否自动上传，如果为false，则在之前的html代码中需要再设置一个button来进行上传
            auto: true,
            // swf文件路径（根据你自己的工程目录进行设置）
            swf: './js/ Uploader.swf',
            // 文件接收服务端（路由）
            //服务器主要负责接受图片并给定唯一id，最后转存到其他目录
            server: '/basic/department/logoUpload',
            pick: {
                // 选择文件的按钮。可选
                id: '#picker',
                // innerHTML: "点击上传logo",
                //不允许单次上传时同时选择多个文件
                multiple: false
            },
            //允许上传的文件总数量为1
            fileNumLimit: 1,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                //此处一定要写得详细，如果使用'image/*'，chrome浏览器会出现打开资源管理器特别慢的bug！！！！！
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
            }
        });

        uploader.on('fileQueued', function(file) {
            $("#logoImg").parent("div").attr({
                id: file.id
            });

            //成功消息不做显示
            // var $img_info = $('<span class="info" class="pull-right">' + file.name + '<p class="state"></p>' + '</span>');
            // $info.append($img_info);

            var $img = $("#logoImg");
            // 创建缩略图
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100); //100x100为缩略图尺寸
        });
  })
</script>